<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
/>
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
/>
<link
href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
rel="stylesheet"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"
/>
<link
href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<title>Your Style</title>
</head>
<body class="bg-dark">
<div class="comtainer-fluid">
<!--Menu Start-->
<nav
class="navbar navbar-expand-lg navbar-light fixed-top clean-navbar mb-5"
style="background-color: #e3f2fd;"
>
<a class="navbar-brand" href="./index.html">
<img
src="./logo/logo.png"
alt="File Not Found"
width="80"
height="50"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./index.html"
><i class="fa fa-home"></i> <b>Home</b>
<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link pl-4" href="./miwatch.html">MI Watch</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle pl-4"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Accessories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="./mp3devices.html"
>MP3 Devices</a
>
<a class="dropdown-item" href="./handfree.html">Handfree</a>
<a class="dropdown-item" href="./charges.html">Charger</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-4" href="./laptop.html">Laptop</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!--Menu End-->
<!--Slider Start-->
<div
id="myCarousel"
class="carousel slide carousel-fade mt-5 pt-5 bg-success"
data-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>
Present your <br />
awesome product
</h4>
<p>
Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis
quidem rerum <br />
necessitatibus praesentium voluptatum deleniti atque
corrupti.
</p>
<a href="#">BUY NOW</a>
</div>
<div class="col-md-5 col-12 order-md-2 order-1">
<img src="./img/img-01.png" class="mx-auto" alt="slide" />
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>
Present your <br />
awesome product
</h4>
<p>
Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis
quidem rerum <br />
necessitatibus praesentium voluptatum deleniti atque
corrupti.
</p>
<a href="#">BUY NOW</a>
</div>
<div class="col-md-5 col-12 order-md-2 order-1">
<img src="./img/img-02.png" class="mx-auto" alt="slide" />
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="mask flex-center">
<div class="container">
<div class="row align-items-center">
<div class="col-md-7 col-12 order-md-1 order-2">
<h4>
Present your <br />
awesome product
</h4>
<p>
Lorem ipsum dolor sit amet. Reprehenderit, qui blanditiis
quidem rerum <br />
necessitatibus praesentium voluptatum deleniti atque
corrupti.
</p>
<a href="#">BUY NOW</a>
</div>
<div class="col-md-5 col-12 order-md-2 order-1">
<img src="./img/img-03.png" class="mx-auto" alt="slide" />
</div>
</div>
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#myCarousel"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#myCarousel"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Slider End-->
</div>
<!--Peragharap Start-->
<div class="container-fluid bg-light pt-5 pb-5">
<div class="row">
<div class="col-md-4 pl-5">
<!-- begin panel group -->
<div
class="panel-group"
id="accordion"
role="tablist"
aria-multiselectable="true"
>
<!-- panel 1 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span
class="side-tab"
data-target="#tab1"
data-toggle="tab"
role="tab"
aria-expanded="false"
>
<div
class="panel-heading"
role="tab"
id="headingOne"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
<h4 class="panel-title">She Sells Seashells</h4>
</div>
</span>
<div
id="collapseOne"
class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne"
>
<div class="panel-body">
<!-- Tab content goes here -->
That fall, as Nadia and Masha got shipped off to prison camps
in Siberia, South Brooklyn tried to recover from the storm. My
dad and I spent a lot of time in the same apartment engrossed
in separate laptops, separate internet missives. He followed
Russian news bloggers closely and would update me on troubling
developments. A rise in protofascist nationalism
</div>
</div>
</div>
<!-- / panel 1 -->
<!-- panel 2 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span
class="side-tab"
data-target="#tab2"
data-toggle="tab"
role="tab"
aria-expanded="false"
>
<div
class="panel-heading"
role="tab"
id="headingTwo"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<h4 class="panel-title collapsed">TAB 2</h4>
</div>
</span>
<div
id="collapseTwo"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo"
>
<div class="panel-body">
<!-- Tab content goes here -->
tab 2 content
</div>
</div>
</div>
<!-- / panel 2 -->
<!-- panel 3 -->
<div class="panel panel-default">
<!--wrap panel heading in span to trigger image change as well as collapse -->
<span
class="side-tab"
data-target="#tab3"
data-toggle="tab"
role="tab"
aria-expanded="false"
>
<div
class="panel-heading"
role="tab"
id="headingThree"
class="collapsed"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<h4 class="panel-title">TAB 3</h4>
</div>
</span>
<div
id="collapseThree"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree"
>
<div class="panel-body">
<!-- tab content goes here -->
tab 3 content
</div>
</div>
</div>
</div>
<!-- / panel-group -->
</div>
<!-- /col-md-4 -->
<div class="col-md-8">
<!-- begin macbook pro mockup -->
<div class="md-macbook-pro md-glare">
<div class="md-lid">
<div class="md-camera"></div>
<div class="md-screen">
<!-- content goes here -->
<div class="tab-featured-image">
<div class="tab-content">
<div class="tab-pane in active" id="tab1">
<img
src="./img/img-04.png"
alt="tab1"
class="img img-responsive"
/>
</div>
<div class="tab-pane" id="tab2">
<img src="./img/img-05.png" />
</div>
<div class="tab-pane fade" id="tab3">
<img
src="./img/img-06.png"
alt="tab1"
class="img img-responsive"
/>
</div>
</div>
</div>
</div>
</div>
<div class="md-base"></div>
</div>
<!-- end macbook pro mockup -->
</div>
<!-- / .col-md-8 -->
</div>
<!--/ .row -->
</div>
<!-- end sidetab container -->
<!--Peragharap End-->
<!--My Insta Pics Start-->
<div class="container-fluid bg-info">
<h2>My Instagram Post</h2>
<section class="customer-logos slider pb-5">
<div class="slide">
<img src="./IMG/img-07.png" />
</div>
<div class="slide">
<img src="./img/img-08.png" />
</div>
<div class="slide">
<img src="./img/img-09.png" />
</div>
<div class="slide">
<img src="./img/img-10.png" />
</div>
<div class="slide">
<img src="./img/img-11.png" />
</div>
<div class="slide">
<img src="./img/img-12.png" />
</div>
<div class="slide">
<img src="./img/img-13.png" />
</div>
<div class="slide">
<img src="./img/img-14.png" />
</div>
<div class="slide">
<img src="./img/img-15.png" />
</div>
</section>
</div>
<!--My Insta Pics End-->
<!-- Footer -->
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-md-left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>About Us!</h5>
<ul class="list-unstyled quick-links">
<li>
<a href="#"
><i class="fa fa-angle-double-right"></i>Shipping &
Payments</a
>
</li>
<li>
<a href="#"
><i class="fa fa-angle-double-right"></i>Privacy Policy</a
>
</li>
<li>
<a href="#"
><i class="fa fa-angle-double-right"></i>Return, Exchange &
Refund</a
>
</li>
<li>
<a href="#"
><i class="fa fa-angle-double-right"></i>Terms And
Conditions</a
>
</li>
<li>
<a href="#"
><i class="fa fa-angle-double-right"></i>Track Your
Shipments</a
>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Contact Details.:</h5>
<ul class="list-unstyled quick-links">
<li>
<a href="#"><i class="fa fa-home"></i>Gujranwala, Pakistan</a>
</li>
<li>
<a href="#"
><i class="fa fa-envelope"></i>customercare@yourstyle.pk</a
>
</li>
<li>
<a href="#"><i class="fa fa-phone-alt"></i>+92 300 1234567</a>
</li>
<li>
<a href="#"><i class="fa fa-phone-alt"></i>+92 300 1234567</a>
</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Quick links</h5>
<ul class="list-unstyled quick-links">
<li>
<a href="./index.html"
><i class="fa fa-angle-double-right"></i>Home</a
>
</li>
<li>
<a href="./miwatch.html"
><i class="fa fa-angle-double-right"></i>MI Watch</a
>
</li>
<li>
<a href="./mp3devices.html"
><i class="fa fa-angle-double-right"></i>MP3 Devices</a
>
</li>
<li>
<a href="./handfree.html"
><i class="fa fa-angle-double-right"></i>Handfree</a
>
</li>
<li>
<a href="./laptop.html" title="Design and developed by"
><i class="fa fa-angle-double-right"></i>Laptop</a
>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5">
<ul class="list-unstyled list-inline social text-center">
<li class="list-inline-item">
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fab fa-google-plus"></i></a>
</li>
<li class="list-inline-item">
<a href="#" target="_blank"><i class="fa fa-envelope"></i></a>
</li>
</ul>
</div>
<hr />
</div>
<div class="row">
<div
class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white"
>
<p class="h6">
© All right Reversed.<a
class="text-green ml-2"
href="/index.html"
target=""
>Your Style</a
>
</p>
</div>
<hr />
</div>
</div>
</section>
<!-- ./Footer -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script>
$("#myCarousel").carousel({
interval: 3000,
});
</script>
<script>
$(document).ready(function () {
$(".customer-logos").slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 4,
},
},
{
breakpoint: 520,
settings: {
slidesToShow: 3,
},
},
],
});
});
</script>
</body>
</html>
/** Slider CSS Setting Start **/
#myCarousel .carousel-item .mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-attachment: fixed;
}
#myCarousel h4 {
font-size: 50px;
margin-bottom: 15px;
color: #fff;
line-height: 100%;
letter-spacing: 0.5px;
font-weight: 600;
}
#myCarousel p {
font-size: 18px;
margin-bottom: 15px;
color: #d5d5d5;
}
#myCarousel .carousel-item a {
background: #f47735;
font-size: 14px;
color: #fff;
padding: 13px 32px;
display: inline-block;
}
#myCarousel .carousel-item a:hover {
background: #394fa2;
text-decoration: none;
}
#myCarousel .carousel-item h4 {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#myCarousel .carousel-item p {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
#myCarousel .carousel-item a {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
#myCarousel .carousel-item .mask img {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
display: block;
height: auto;
max-width: 100%;
}
#myCarousel h4,
#myCarousel p,
#myCarousel a,
#myCarousel .carousel-item .mask img {
-webkit-animation-duration: 1s;
animation-duration: 1.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#myCarousel .container {
max-width: 1430px;
}
#myCarousel .carousel-item {
height: 100%;
min-height: 550px;
}
#myCarousel {
position: relative;
z-index: 1;
background: url(https://i.imgur.com/6axE29k.jpg) center center no-repeat;
background-size: cover;
}
.carousel-control-next,
.carousel-control-prev {
height: 40px;
width: 40px;
padding: 12px;
top: 50%;
bottom: auto;
transform: translateY(-50%);
background-color: #f47735;
}
.carousel-item {
position: relative;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
transition: -webkit-transform 0.6s ease;
transition: transform 0.6s ease;
transition: transform 0.6s ease, -webkit-transform 0.6s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.carousel-fade .carousel-item {
opacity: 0;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
opacity: 1;
}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-right.active {
opacity: 0;
}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
@supports (transform-style: preserve-3d) {
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
/** Slider CSS Setting End **/
/** Peragraph CSS Setting Start **/
body {
margin-top: 60px;
font-family: "Montserrat", sans-serif;
}
/* this is just for the demo */
.panel-heading:hover {
cursor: pointer;
}
.panel-heading {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.side-tab:hover {
cursor: pointer;
}
.panel.panel-default {
border: none;
box-shadow: none !important;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel-heading {
border: none;
background-color: #eee;
}
.panel-body {
background-color: #f5f5f5;
}
.panel-title {
font-weight: 400;
color: white;
}
/*----------------------------------
Macbook pro mockup from:
http://jaredhardy.com/minimal-devices/
----------------------------------*/
.md-macbook-pro {
display: block;
width: 55.3125em;
height: 31.875em;
font-size: 13px;
margin: 0 auto;
@media (max-width: 1199px) {
font-size: 11px;
}
@media (max-width: 1024px) {
font-size: 10px;
}
@media (max-width: 767px) {
font-size: 7px;
}
@media (max-width: 320px) {
font-size: 5px;
}
}
.md-macbook-pro .md-lid {
width: 45em;
height: 30.625em;
overflow: hidden;
margin: 0 auto;
position: relative;
border-radius: 1.875em;
border: solid 0.1875em #cdced1;
background: #131313;
}
.md-macbook-pro .md-camera {
width: 0.375em;
height: 0.375em;
margin: 0 auto;
position: relative;
top: 1.0625em;
background: #000;
border-radius: 100%;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
.md-macbook-pro .md-camera:after {
content: "";
display: block;
width: 0.125em;
height: 0.125em;
position: absolute;
left: 0.125em;
top: 0.0625em;
background: #353542;
border-radius: 100%;
}
.md-macbook-pro .md-screen {
width: 42.25em;
height: 26.375em;
margin: 0 auto;
position: relative;
top: 2.0625em;
background: #fff;
overflow: hidden;
}
.md-macbook-pro .md-screen img {
width: 100%;
}
.md-macbook-pro .md-base {
width: 100%;
height: 0.9375em;
position: relative;
top: -0.75em;
background: #c6c7ca;
}
.md-macbook-pro .md-base:after {
content: "";
display: block;
width: 100%;
height: 0.5em;
margin: 0 auto;
position: relative;
bottom: -0.1875em;
background: #b9babe;
border-radius: 0 0 1.25em 1.25em;
}
.md-macbook-pro .md-base:before {
content: "";
display: block;
width: 7.6875em;
height: 0.625em;
margin: 0 auto;
position: relative;
background: #a6a8ad;
border-radius: 0 0 0.625em 0.625em;
}
.md-macbook-pro.md-glare .md-lid:after {
content: "";
display: block;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-radius: 0 1.25em 0 0;
background: -webkit-linear-gradient(
37deg,
rgba(255, 255, 255, 0) 50%,
rgba(247, 248, 240, 0.025) 50%,
rgba(250, 245, 252, 0.08)
);
background: -moz-linear-gradient(
37deg,
rgba(255, 255, 255, 0) 50%,
rgba(247, 248, 240, 0.025) 50%,
rgba(250, 245, 252, 0.08)
);
background: -o-linear-gradient(
37deg,
rgba(255, 255, 255, 0) 50%,
rgba(247, 248, 240, 0.025) 50%,
rgba(250, 245, 252, 0.08)
);
background: linear-gradient(
53deg,
rgba(255, 255, 255, 0) 50%,
rgba(247, 248, 240, 0.025) 50%,
rgba(250, 245, 252, 0.08)
);
}
/** Peragraph CSS Setting End **/
/** My Insta Pic Setting Start **/
h2 {
text-align: center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/** My Insta Pic Setting End **/
/** Footer Start **/
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
section {
padding: 60px 0;
}
section .section-title {
text-align: center;
color: #007b5e;
margin-bottom: 50px;
text-transform: uppercase;
}
#footer {
background: #007b5e !important;
}
#footer h5 {
padding-left: 10px;
border-left: 3px solid #eeeeee;
padding-bottom: 6px;
margin-bottom: 20px;
color: #ffffff;
}
#footer a {
color: #ffffff;
text-decoration: none !important;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
#footer ul.social li {
padding: 3px 0;
}
#footer ul.social li a i {
margin-right: 5px;
font-size: 25px;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
}
#footer ul.social li:hover a i {
font-size: 30px;
margin-top: -10px;
}
#footer ul.social li a,
#footer ul.quick-links li a {
color: #ffffff;
}
#footer ul.social li a:hover {
color: #eeeeee;
}
#footer ul.quick-links li {
padding: 3px 0;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
transition: 0.5s all ease;
}
#footer ul.quick-links li:hover {
padding: 3px 0;
margin-left: 5px;
font-weight: 700;
}
#footer ul.quick-links li a i {
margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
font-weight: 700;
}
@media (max-width: 767px) {
#footer h5 {
padding-left: 0;
border-left: transparent;
padding-bottom: 0px;
margin-bottom: 10px;
}
}
/** Footer End **/
/** Product grid Start **/
.product-grid6,
.product-grid6 .product-image6 {
overflow: hidden;
}
.product-grid6 {
font-family: "Open Sans", sans-serif;
text-align: center;
position: relative;
transition: all 0.5s ease 0s;
}
.product-grid6:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.product-grid6 .product-image6 a {
display: block;
}
.product-grid6 .product-image6 img {
width: 100%;
height: auto;
transition: all 0.5s ease 0s;
}
.product-grid6:hover .product-image6 img {
transform: scale(1.1);
}
.product-grid6 .product-content {
padding: 12px 12px 15px;
transition: all 0.5s ease 0s;
}
.product-grid6:hover .product-content {
opacity: 0;
}
.product-grid6 .title {
font-size: 20px;
font-weight: 600;
text-transform: capitalize;
margin: 0 0 10px;
transition: all 0.3s ease 0s;
}
.product-grid6 .title a {
color: #000;
}
.product-grid6 .title a:hover {
color: #2e86de;
}
.product-grid6 .price {
font-size: 18px;
font-weight: 600;
color: #2e86de;
}
.product-grid6 .price span {
color: #999;
font-size: 15px;
font-weight: 400;
text-decoration: line-through;
margin-left: 7px;
display: inline-block;
}
.product-grid6 .social {
background-color: #fff;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
transform: translateX(-50%);
position: absolute;
bottom: -50%;
left: 50%;
z-index: 1;
transition: all 0.5s ease 0s;
}
.product-grid6:hover .social {
opacity: 1;
bottom: 20px;
}
.product-grid6 .social li {
display: inline-block;
}
.product-grid6 .social li a {
color: #909090;
font-size: 16px;
line-height: 45px;
text-align: center;
height: 45px;
width: 45px;
margin: 0 7px;
border: 1px solid #909090;
border-radius: 50px;
display: block;
position: relative;
transition: all 0.3s ease-in-out;
}
.product-grid6 .social li a:hover {
color: #fff;
background-color: #2e86de;
width: 80px;
}
.product-grid6 .social li a:after,
.product-grid6 .social li a:before {
content: attr(data-tip);
color: #fff;
background-color: #2e86de;
font-size: 12px;
letter-spacing: 1px;
line-height: 20px;
padding: 1px 5px;
border-radius: 5px;
white-space: nowrap;
opacity: 0;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: -30px;
}
.product-grid6 .social li a:after {
content: "";
height: 15px;
width: 15px;
border-radius: 0;
transform: translateX(-50%) rotate(45deg);
top: -20px;
z-index: -1;
}
.product-grid6 .social li a:hover:after,
.product-grid6 .social li a:hover:before {
opacity: 1;
}
@media only screen and (max-width: 990px) {
.product-grid6 {
margin-bottom: 30px;
}
}
/** Product Grid End **/
